<%@ page import="java.text.SimpleDateFormat" %>
<%@ page import="java.util.Date" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>工业有害气体检测系统-设备管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="dist/css/adminlte.min.css">
    <!-- Google Font: Source Sans Pro -->
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
    <!--消息提示框的css文件-->
    <link rel="stylesheet" href="plugins/alertTools/alert.css">
    <!--DataTable-1~.10.21-->
    <link rel="stylesheet" type="text/css" href="plugins/dataTable1.10.21/css/jquery.dataTables.css">
    <link rel="stylesheet" type="text/css" href="plugins/dataTable1.10.21/css/dataTables.foundation.css">
    <!-- DataTables CSS -->
    <style type="text/css" media="screen">

        /** 分页按钮鼠标移入时的样式 **/
        .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
            color: white !important;
            border: 1px solid #1822ad;
            background-color: #6a72ea;
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6a72ea),
            color-stop(100%, #1822ad));
            /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top, #6a72ea 0%, #1822ad 100%);
            /* Chrome10+,Safari5.1+ */
            background: -moz-linear-gradient(top, #6a72ea 0%, #1822ad 100%);
            /* FF3.6+ */
            background: -ms-linear-gradient(top, #6a72ea 0%, #1822ad 100%);
            /* IE10+ */
            background: -o-linear-gradient(top, #6a72ea 0%, #1822ad 100%);
            /* Opera 11.10+ */
            background: linear-gradient(to bottom, #6a72ea 0%, #1822ad 100%);
            /* W3C */
        }

        /** 当前激活的分页按钮样式 **/
        .dataTables_wrapper .dataTables_paginate .paginate_button:active {
            outline: none;
            background-color: #1e2bda;
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1e2bda),
            color-stop(100%, #1720a4));
            /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top, #1e2bda 0%, #1720a4 100%);
            /* Chrome10+,Safari5.1+ */
            background: -moz-linear-gradient(top, #1e2bda 0%, #1720a4 100%);
            /* FF3.6+ */
            background: -ms-linear-gradient(top, #1e2bda 0%, #1720a4 100%);
            /* IE10+ */
            background: -o-linear-gradient(top, #1e2bda 0%, #1720a4 100%);
            /* Opera 11.10+ */
            background: linear-gradient(to bottom, #1e2bda 0%, #1720a4 100%);
            /* W3C */
            box-shadow: inset 0 0 3px #111;
        }

        .deviceDialogClass {
            position: fixed;;
            top: 15%;
            left: 37%;
            width: 25%;
            height: 70%;
            background-color: #939ba7;
            display: none;
        }
    </style>
</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">
    <%--导航栏和左边框--%>
    <%@include file="../../html/top.html" %>
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1>设备管理</h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                            <li class="breadcrumb-item active">设备管理</li>
                        </ol>
                    </div>
                </div>
            </div><!-- /.container-fluid -->
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="card">
                <!-- /.card-header -->
                <div class="card-body">
                    <table id="deviceTables" class="display" style="white-space: nowrap;">
                        <thead>
                        <tr>
                            <th>设备号</th>
                            <th>设备名称</th>
                            <th>厂家</th>
                            <th>设备信息</th>
                            <th>启用时间</th>
                            <th>&emsp;&emsp;&emsp;&emsp;操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
                <!-- /.card-body -->
            </div>
            <!-- /.card -->
        </section>
        <!-- /.content -->
        <!--弹出用户交互界面start-->
        <div id="deviceDialog" class="deviceDialogClass">
            <div class="col-sm-12" style="text-align: center;margin-top: 2%;font-size: larger;">
                <b>添加设备</b>
            </div>
            <form class="form-horizontal" onsubmit="return addDevice()" action="updateDevice.do" method="post">
                <div class="card-body">
                    <div class="form-group row">
                        <label class="col-sm-4 col-form-label">设备号</label>
                        <div class="col-sm-8">
                            <input type="text" name="gd_dev_id" id="gd_dev_id" class="form-control"
                                   placeholder="请输入设备号">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-4 col-form-label">设备名称</label>
                        <div class="col-sm-8">
                            <input type="text" name="gd_dev_name" id="gd_dev_name" class="form-control"
                                   placeholder="请输入设备名称">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-4 col-form-label">厂家</label>
                        <div class="col-sm-8">
                            <input type="text" name="gd_dev_factory" id="gd_dev_factory" class="form-control"
                                   placeholder="请输入厂家名">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-4 col-form-label">设备信息</label>
                        <div class="col-sm-8">
                            <input type="text" name="gd_dev_info" id="gd_dev_info" class="form-control"
                                   placeholder="请输入设备信息">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-sm-4 col-form-label">启用时间</label>
                        <div class="col-sm-8">
                            <input type="text" name="gd_dev_start" id="gd_dev_start" class="form-control"
                                   placeholder="请输入启用时间">
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-sm-6"><input type="submit" class="btn btn-primary" value="提交"></div>
                        <div class="col-sm-6"><input type="button"
                                                     onclick="javascript:$('#deviceDialog').css('display','none')"
                                                     class="btn btn-default float-right" value="取消"></div>
                    </div>
                </div>
            </form>
        </div>
        <!--弹出用户界面end-->
    </div>

    <!-- /.content-wrapper -->
    <%@include file="../../html/footer.html" %>
    <!-- Control Sidebar -->
    <aside class="control-sidebar control-sidebar-dark">
        <!-- Control sidebar content goes here -->
    </aside>
    <!-- /.control-sidebar -->
</div>
<!-- ./wrapper -->
</body>


<!-- jQuery -->
<script type="text/javascript" src="plugins/jquery/jquery.min.js"></script>
<!-- DataTables -->
<!-- Bootstrap 4 -->
<script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/adminlte.min.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="plugins/dataTable1.10.21/js/jquery.dataTables.js"></script>
<script src="plugins/dataTable1.10.21/jquery.spring-friendly.js"></script>
<script src="dist/js/demo.js"></script>
<script src="plugins/alertTools/alert.js"></script>
<!--表格-->
<script type="text/javascript">
    $(document).ready(function () {
        dataTableConfig();
    });

    var table;

    //表单构建
    function dataTableConfig() {
        table = $('#deviceTables').DataTable({
            searching: true,
            searchDelay: 800,
            ordering: false,
            serverSide: true,
            bStateSave: true,//是否打开客户端状态记录功能,此功能在ajax刷新纪录的时候不会将个性化设定回复为初始化状态
            bJQueryUI: true,//是否使用 jQury的UI theme
            scrollX: true,
            cache: false,  //禁用缓存
            stateSave: true,      // 是否保存当前datatables的状态(刷新后当前保持状态)
            ajax: {
                type: "POST",
                url: "showDevice.do",
                dataType: "json"//返回数据格式为json
            },
            lengthMenu: [
                [10, 15, 20, 30, 50, 100],
                [10, 15, 20, 30, 50, 100] // 更改每页显示记录数
            ],
            language: {
                "bProcessing": true,
                "processing": "处理中...",
                "lengthMenu": "_MENU_ 记录/页",
                "zeroRecords": "没有匹配的记录",
                "info": "第 _START_ 至 _END_ 项记录，共  _TOTAL_ 项",
                "infoEmpty": "第 0 至 0 项记录，共 0 项",
                "infoFiltered": "(由 _MAX_ 项记录过滤)",
                "infoPostFix": "",
                "search": "搜索",
                "url": "",
                "decimal": ",",
                "thousands": ".",
                "emptyTable": "暂无数据",
                "paginate": {
                    "first": "首页",
                    "previous": "上页",
                    "next": "下页",
                    "last": "末页"
                }
            },
            autoWidth: false,
            pagingType: "full_numbers",
            columns: [
                {data: "gd_dev_id"},
                {data: "gd_dev_name"},
                {data: "gd_dev_factory"},
                {data: "gd_dev_info"},
                {data: "gd_dev_start"},
                {
                    data: "gd_dev_id",
                    render: function (data, type, row, meta) {
                        if (type === 'display') {
                            return '&nbsp;&nbsp;&nbsp;<a href="javascript:void(0)" onclick="deleteDevice(' + data + ')" class="btn-danger btn-sm">删除</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' +
                                '<a href="javascript:void(0)" onclick="updateDeviceDialog(table.row(' + meta.row + ').data())" class="btn-info btn-sm">修改</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' +
                                '<a href="javascript:void(0)" onclick="addDeviceDialog()" class="btn-primary btn-sm">添加</a>';
                        }
                        return data;
                    }

                }
            ]
        });
    }

    //删除用户
    function deleteDevice(gd_dev_id) {
        if (confirm("确定要删除设备号为" + gd_dev_id + "的用户吗？")) {
            $.ajax({
                type: "POST",
                url: "deleteDevice.do",
                data: {gd_dev_id: gd_dev_id},
                success: function (data) {
                    if (data == "true") {
                        success_prompt("删除成功！");
                        location.reload();
                    } else {
                        fail_prompt("删除失败!")
                    }
                },
                error: function () {
                    fail_prompt("数据异常，请重试！")
                }
            });

        }
    }

    //修改用户弹框
    function updateDeviceDialog(device) {
        $("#deviceDialog b").text("修改用户信息");
        var from = $("#deviceDialog form");
        from.attr("action", "updateDevice.do");
        from.attr("onsubmit", "return updateDevice()");
        $("#deviceDialog").css("display", "block");
        $("input[name='gd_dev_id']").val(device.gd_dev_id);
        $("input[name='gd_dev_name']").val(device.gd_dev_name);
        $("input[name='gd_dev_factory']").val(device.gd_dev_factory);
        $("input[name='gd_dev_info']").val(device.gd_dev_info);
        $("input[name='gd_dev_start']").val(device.gd_dev_start);

    }

    //添加设备弹框
    function addDeviceDialog() {
        $("input[name='gd_dev_id']").val("");
        $("input[name='gd_dev_name']").val("");
        $("input[name='gd_dev_factory']").val("");
        $("input[name='gd_dev_info']").val("");
        <% SimpleDateFormat ft = new SimpleDateFormat ("yyyy-MM-dd hh:mm:ss");%>
        var gd_dev_startTime = "<%=ft.format(new Date())%>";
        $("input[name='gd_dev_start']").val(gd_dev_startTime);
        $("select[name='gd_dev_identity']").val("employee");
        $("#deviceDialog b").text("添加设备");
        $("#deviceDialog form").attr("action", "addDevice.do");
        $("#deviceDialog form").attr("onsumbit", "return addDevice()");
        $("#deviceDialog").css("display", "block");

    }

    //添加用户
    function addDevice() {
        $("#deviceDialog").css("display", "none");
        success_prompt("添加成功");
        return true;

    }

    //修改用户信息
    function updateDevice() {
        $("#deviceDialog").css("display", "none");
        success_prompt("修改成功！");
        return true;
    }
</script>

</html>
